<template>
 <div>
   <header></header>
   <ul class="goods-list">
     <li>
      <a :href="url1" ca="201788_cxjh5_promote88_buyCoupon$机器打蜡(5座)+检测套餐">
        <div class="pic"><img src="../../../assets/image/promote88/hotsale01.png" /></div>
        <div class="info">
        <div class="des">机器打蜡(5座)+检测套餐</div>
        <dl>
          <dt>
              <p class="price"><span><i>¥</i>59</span><br/><cite>门市价¥145</cite></p>
          </dt>
          <dd>
              <a class="goto">立即抢购</a>
          </dd>
        </dl>
        </div>
       </a>
      </li>
      <li>
      <a :href="url2" ca="201788_cxjh5_promote88_buyCoupon$精致洗车＋机器打蜡(5座)套餐">
        <div class="pic"><img src="../../../assets/image/promote88/hotsale02.png" /></div>
        <div class="info">
        <div class="des">精致洗车＋机器打蜡(5座)套餐</div>
        <dl>
          <dt>
              <p class="price"><span><i>¥</i>168</span><br/><cite>门市价¥280</cite></p>
          </dt>
          <dd>
              <a class="goto">立即抢购</a>
          </dd>
        </dl>
        </div>
        </a>
      </li>
      <li>
        <a :href="url3" ca="201788_cxjh5_promote88_buyCoupon$空调清洗除臭＋车内空气净化套餐">
          <div class="pic"><img src="../../../assets/image/promote88/hotsale03.png" /></div>
          <div class="info">
          <div class="des">空调清洗除臭＋车内空气净化套餐</div>
          <dl>
            <dt>
                <p class="price"><span><i>¥</i>219</span><br/><cite>门市价¥659</cite></p>
            </dt>
            <dd>
                <a class="goto">立即抢购</a>
            </dd>
          </dl>
          </div>
        </a>
      </li>
      <li>
      <a :href="url4" ca="201788_cxjh5_promote88_buyCoupon$空调管路清洗可视化空调蒸发箱清洗套餐">
        <div class="pic"><img src="../../../assets/image/promote88/hotsale04.png" /></div>
        <div class="info">
        <div class="des">空调管路清洗+<br />可视化空调蒸发箱清洗套餐</div>
        <dl>
          <dt>
              <p class="price"><span><i>¥</i>399</span><br/><cite>门市价¥797</cite></p>
          </dt>
          <dd>
              <a class="goto">立即抢购</a>
          </dd>
        </dl>
        </div>
       </a>
      </li>
      <li>
        <a ca="201788_cxjh5_promote88_buyCoupon$全车焕新美容卡立返100元车享金" @click="showSelectCity(skuCode1)">
          <div class="pic"><img src="../../../assets/image/promote88/hotsale05.png" /></div>
          <div class="info">
          <div class="des">全车焕新美容卡<br />立返<i>100</i>元车享金</div>
          <dl>
            <dt>
                <p class="price"><span><i>¥</i>1588</span><br/><cite>门市价¥3030</cite></p>
            </dt>
            <dd>
                <a class="goto">立即抢购</a>
            </dd>
          </dl>
          </div>
        </a>
      </li>
      <li>
        <a ca="201788_cxjh5_promote88_buyCoupon$全车焕新美容卡升级版立返200元车享金" @click="showSelectCity(skuCode2)">
          <div class="pic"><img src="../../../assets/image/promote88/hotsale06.png" /></div>
          <div class="info">
          <div class="des">全车焕新美容卡升级版<br />立返<i>200</i>元车享金</div>
          <dl>
            <dt>
                <p class="price"><span><i>¥</i>2988</span><br/><cite>门市价¥6150</cite></p>
            </dt>
            <dd>
                <a class="goto">立即抢购</a>
            </dd>
          </dl>
          </div>
        </a>
      </li>
      <li>
        <a :href="url7" ca="201788_cxjh5_promote88_buyCoupon$进气系统免拆清洗+节气门清洁套餐">
          <div class="pic"><img src="../../../assets/image/promote88/hotsale07.png" /></div>
          <div class="info">
          <div class="des">进气系统免拆清洗+节气门<br />清洁套餐</div>
          <dl>
            <dt>
                <p class="price"><span><i>¥</i>348</span><br/><cite>门市价¥679</cite></p>
            </dt>
            <dd>
                <a class="goto">立即抢购</a>
            </dd>
          </dl>
          </div>
        </a>
      </li>
      <li>
        <a :href="url8" ca="201788_cxjh5_promote88_buyCoupon$发动机舱清洁镀膜+精致洗车套餐">
          <div class="pic"><img src="../../../assets/image/promote88/hotsale08.png" /></div>
          <div class="info">
          <div class="des">发动机舱清洁镀膜+精致洗车<br />套餐</div>
          <dl>
            <dt>
                <p class="price"><span><i>¥</i>198</span><br/><cite>门市价¥340</cite></p>
            </dt>
            <dd>
                <a class="goto">立即抢购</a>
            </dd>
          </dl>
          </div>
        </a>
      </li>
      <li>
        <a :href="url9" ca="201788_cxjh5_promote88_buyCoupon$全车内饰清洁+机器打蜡(5座)套餐">
          <div class="pic"><img src="../../../assets/image/promote88/hotsale09.png" /></div>
          <div class="info">
          <div class="des">全车内饰清洁+机器打蜡(5座)<br />套餐</div>
          <dl>
            <dt>
                <p class="price"><span><i>¥</i>288</span><br/><cite>门市价¥480</cite></p>
            </dt>
            <dd>
                <a class="goto">立即抢购</a>
            </dd>
          </dl>
          </div>
        </a>
      </li>
      <li>
        <a :href="url10" ca="201788_cxjh5_promote88_buyCoupon$全车内饰清洁+精致洗车套餐">
          <div class="pic"><img src="../../../assets/image/promote88/hotsale10.png" /></div>
          <div class="info">
          <div class="des">全车内饰清洁+精致洗车套餐</div>
          <dl>
            <dt>
                <p class="price"><span><i>¥</i>368</span><br/><cite>门市价¥520</cite></p>
            </dt>
            <dd>
                <a class="goto">立即抢购</a>
            </dd>
          </dl>
          </div>
        </a>
      </li>
      <li>
        <a :href="url11" ca="201788_cxjh5_promote88_buyCoupon$外部深度护理套餐">
          <div class="pic"><img src="../../../assets/image/promote88/hotsale11.png" /></div>
          <div class="info">
          <div class="des">外部深度护理套餐<span>(精致洗车+机器打蜡+机舱清洁镀膜)</span></div>
          <dl>
            <dt>
                <p class="price"><span><i>¥</i>299</span><br/><cite>门市价¥498</cite></p>
            </dt>
            <dd>
                <a class="goto">立即抢购</a>
            </dd>
          </dl>
          </div>
        </a>
      </li>
      <li>
        <a ca="201788_cxjh5_promote88_buyCoupon$车享家定牌雨刮套餐" @click="showSelectCity(skuCode3)">
          <div class="pic"><img src="../../../assets/image/promote88/hotsale12.png" /></div>
          <div class="info">
          <div class="des">车享家定牌雨刮套餐<span>(车享家定牌雨刮一副+前档玻璃镀膜)</span></div>
          <dl>
            <dt>
                <p class="price"><span><i>¥</i>298</span><br/><cite>门市价¥488</cite></p>
            </dt>
            <dd>
                <a class="goto">立即抢购</a>
            </dd>
          </dl>
          </div>
        </a>
      </li>
   </ul>
   <div class="slidebar">
			<a :href="homeUrl" class="icon-tozhu" ca="201788_cxjh5_promote88_sidebar_tozhu$主会场"></a>
			<a href="javascript:void(0)" v-if="isApp" @click="share" class="btn-share" ca="201788_cxjh5_promote88_sidebar_share$分享"></a>
			<a href="javascript:void(0)" @click="goTop" class="gotop" ca="201788_cxjh5_promote88_sidebar_Top$返回顶层"></a>
		</div>
 </div>
</template>
<script type="text/javascript">
import common from "../../../assets/js/common.js";
import {Toast, Popup} from 'mint-ui';
import Vue from 'vue';
Vue.component(Popup.name, Popup);
export default {
    data: function() {
        return {
           url1: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('32725072B2F2B77CD590A5531A46412D.htm') : this.changeUrl('1B47E1B4F19C8B4935E9B08969199539.htm'),
           url2: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('32725072B2F2B77CFAD8682C93D9D203.htm') : this.changeUrl('1B47E1B4F19C8B497BD365C8E045E6F8.htm'),
           url3: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('32725072B2F2B77C82D400F4466BBE4A.htm') : this.changeUrl('1B47E1B4F19C8B4926099395781F7E22.htm'),	
           url4: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('32725072B2F2B77C35E9B08969199539.htm') : this.changeUrl('1B47E1B4F19C8B497FCDECCC5F500479.htm'),	
           url7: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('32725072B2F2B77C7BD365C8E045E6F8.htm') : this.changeUrl('1B47E1B4F19C8B4913D883593C3BD501.htm'),
           url8: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('32725072B2F2B77C26099395781F7E22.htm') : this.changeUrl('1B47E1B4F19C8B491940FDC5CF2E79D3.htm'),
           url9: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('32725072B2F2B77C7FCDECCC5F500479.htm') : this.changeUrl('1B47E1B4F19C8B49F50A8C6919E36A3E.htm'),
           url10: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('32725072B2F2B77C13D883593C3BD501.htm') : this.changeUrl('290E72BCA0ED4058D590A5531A46412D.htm'),
           url11: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? this.changeUrl('30287D31030A48287BD365C8E045E6F8.htm') : process.env.NODE_ENV =='pre' ? this.changeUrl('32725072B2F2B77C1940FDC5CF2E79D3.htm') : this.changeUrl('290E72BCA0ED4058FAD8682C93D9D203.htm'),
           skuCode1: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? '1045721'	: process.env.NODE_ENV == 'pre' ? '' : '1073091',
           skuCode2: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? '1045720'	: process.env.NODE_ENV == 'pre' ? '' : '1073092',
           skuCode3: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? ''	: process.env.NODE_ENV == 'pre' ? '' : '1069369',
           signUrl: process.env.NODE_ENV == 'sit' || process.env.NODE_ENV== 'development' ? common.isEnv("//recruit") : common.isEnv("//wx"),
					 isApp: common.isApp(),
					 loadAppUrl: '//cxb.chexiang.com/service/version/getLatestAppVersion/0?channel=? channel=cx_cxj_xzy_0807_88bkzqyl',
           homeUrl: common.isEnv('//c') + '/promotion/88zhuhuichang.htm?channel=cx_home_201788_cxjh5_20170801',
        }
    },
    mounted: function() {
      //打点
      this.$nextTick(function () {
      	common.ANA_AnalyticsScan();
      });
      //监控返回顶部按钮是否显示
			this.isShowTopBtn();
      //分享
      this.initShareInfo();
    },
    methods: {
      //分享信息
    	initShareInfo() {
				var _this = this;
				_this.shareObj = {
					friend:{
						title: "养车省钱最强攻略",
						desc: "品质套餐 明星单品  动动手指 一省到底！",
						imgUrl: "https://s1.cximg.com/cms/wap/resource/chexiangjiaM/active/1788fhc/image/share.png",
						link: common.isEnv("//cxjapp") +"/cx/cxj/cxjweb/promote88/hotsale/hotsale.shtml?channel=cx_cxj_xzy_0807_88bkzqyl"
					},
					friendQuan:{
						title: "养车省钱最强攻略",
						desc: "品质套餐 明星单品  动动手指 一省到底！",
						imgUrl: "https://s1.cximg.com/cms/wap/resource/chexiangjiaM/active/1788fhc/image/share.png",
						link: common.isEnv("//cxjapp") +"/cx/cxj/cxjweb/promote88/hotsale/hotsale.shtml?channel=cx_cxj_xzy_0807_88bkzqyl"
					}
				}

				//分享判断渠道
				if(!_this.isApp){       
					common.wxShare(_this);
				}
			},
			//分享
			share() {
				var _self = this;
				lb.shareInfo({
					title: _self.shareObj.friend.title,
					url: _self.shareObj.friend.link,
					content: _self.shareObj.friend.desc,
					imgUrl: _self.shareObj.friend.imgUrl
				} ,(data) => {
					if (data.errorCode === '0') {
							//Toast('分享成功');
					}else{
							Toast('分享失败');
					}
				});
			},
      //选择城市
			showSelectCity(code) {
				var _this = this;
				if(_this.isApp) {						
					window.location.href = "selectCity/selectCity." + common.isHtml() + '?skuCode=' + code;
				}else {
					window.location.href = _this.loadAppUrl;
				}         
			},
      //判断渠道是否加checklogin, app加前置登录
			changeUrl (val) {
				if(val =='') return 'javascript:void(0)';
				if(common.isApp()){
					return common.isEnv('//cxj.activity') + "/service/error/check_login_and_tologin?backUrl="+encodeURI(common.isEnv('https://h.mall') + '/mdseDetail_v2/' + val);
				}else {
					return common.isEnv('//h.mall') + '/mdseDetail_v2/' + val;
				}
			},
      //返回顶部
			goTop() {
				//获取当前scrollTop的位置
				var curScroll = $(document.body).scrollTop();
         
				//上升的位移
				var speed = 5; 
				if(curScroll>0){
						setInterval(timer,1);
				}
				function timer(){ 
					if(curScroll>0){ 
						curScroll = curScroll-speed;
						$(document.body).scrollTop(curScroll);
						if(curScroll<=0){ 
							$(document.body).scrollTop(0);
							clearInterval(timer);
							//console.log("清除计时器") 
						}
					}
				}
      },
      isShowTopBtn() {
				$(window).scroll(()=>{
					let top = document.documentElement.scrollTop || document.body.scrollTop;
          if(top >= 30) {
						$(".gotop").css('display','block');
					}
					else {
						$(".gotop").css('display','none');
					}
				})
			}
    }
}  
  
</script>
<style lang="scss" scope>
@import '../../../assets/css/common.scss';
@function rem($px){
  @return $px / 20 * 1rem;
}
body{
   background:#008da4 url("../../../assets/image/promote88/head-bk.png") no-repeat top left;
   background-size:contain;
   max-width:750px;
   margin:0 auto;
   padding-bottom:rem(50)
}
header{
 /*background:transparent url("../../../assets/image/promote88/head-bk.png") no-repeat top left;*/
  width:rem(750);
  height:rem(518);
}
.sideBtn{height:rem(81);width:rem(81);display:inline-block;margin-bottom:rem(24);border-radius: 50%;box-shadow: 0 1px 1px #555;}
.title{
  background:transparent url("../../../assets/image/promote88/title.png") no-repeat top left;
  width:rem(750);
  height:rem(117);
  background-size:cover;
}
.goods-list{
  padding:rem(20);
  li:nth-child(even){
    margin-right:0;
  }
  li{
    width:rem(345);
    background-color:#fff;
    border-radius:rem(10);
    float:left;
    margin-right:rem(20);
    margin-bottom:rem(20);
    .pic{
      img{
        width:100%;
        border-radius:rem(10);
      }
    } 
    .info{
      padding:rem(20);
    }
    .des{
         font-size:rem(22);
         margin-top:rem(20);
         height:rem(64);    
         color:$_666;     
         span{
           display:block;
           font-size:rem(20);
           color:$_666;
           white-space:nowrap;
         }
         i{
           color:#e43038;
         }
    }
    dl{
      clear:both;
      overflow:hidden;
    }
    dt{
      width:45%;
      float:left;
    }
    dd{
      width:55%;
      float:left;
    }
    dt{
      .price{
        margin-top:rem(20);
        span{
          font-size:rem(44);
          color:#e1121c;
          i{
            font-size:rem(30);
          }
        }
        cite{
          font-size:rem(20);
          color:#999;
          text-decoration:line-through;
        }
      }
    }
    dd{
      .goto{
        display:inline-block;
        width:rem(160);
        height:rem(50);
        line-height:rem(50);
        background-color:#f22129;
        color:#fff;
        text-align:center;
        border-radius:rem(10);
        vertical-align: bottom;
        margin-top:rem(55);
        float:right;
      }
    }
  }
}
.slidebar{position: fixed;width:rem(81); bottom:rem(50);right:rem(12);z-index: 200;
  .gotop{@extend .sideBtn;display:none;background:url(../../../assets/image/cxjpsessions/icon-gotop.png) no-repeat;background-size:100%;}
  .btn-share{@extend .sideBtn;background:url(../../../assets/image/cxjpsessions/btn-icon-share.png) no-repeat;background-size:100%;}
  .icon-tozhu{@extend .sideBtn;background:url(../../../assets/image/cxjpsessions/icon-tozhu.png) no-repeat;background-size:100%;}
}
</style>

